import React, { useReducer } from 'react'
const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + action.payload }
    case "DECREMENT":
      return { ...state, count: state.count - action.payload }
    default:
      return state
  }
}
function App() {
  // useReducer 提供  state  和 dispatch
  // 使用useReducer 就可以不使用useState
  const [ state, dispatch ] = useReducer(reducer, { count: 100 })
  console.log(useReducer(reducer, { count: 100 }))
  return (
    <div>
      <button onClick = { () => {
        dispatch({
          type: 'DECREMENT',
          payload: 1
        })
      }}>-</button> 
      { state.count } 
      <button onClick = { () => {
        dispatch({
          type: 'INCREMENT',
          payload: 1
        })
      }}>+</button>
    </div>
  )
}

export default App
